<template>
    <div class="container">
        <m-header :closeFn="onClose">购买定制客运车票</m-header>
        <div class="main">
            <template v-if="list.length">
                <div class="sidebar">
                    <div v-for="(item,index) in list" class="sidebar-item" :class="[activeKey == index ? 'active' : '']" :key="index" @click="sidebarChange" :data-index="index">{{item.name}}</div>
                </div>
                <ul class="content">
                    <li v-for="(item,index) in list[activeKey].children" :key="index" @click="onSelect(item)">{{item.name}}</li>
                </ul>

            </template>
            <van-empty style="width: 100%;" :image-size="180" v-show="!list.length" description="当前无数据"></van-empty>
        </div>
    </div>
</template>

<script>
    import {getSchoolType, getSchool } from "../../../request/api";
    import {Empty} from 'vant';
    import {getSession} from "../../../utils/store";

    export default {
      name: "chooseSchool",
      components: {[Empty.name]: Empty},
      data(){
        return {
          activeKey: 0,
          list: [
            /*{name: '禅城区',children: [
              {name: '禅城第一小学'},
              {name: '禅城第二小学'},
              {name: '禅城第三小学'},
              {name: '禅城第四小学'},
              {name: '禅城第五小学'},
              {name: '禅城第六小学'},
              {name: '禅城第七小学'},
              {name: '禅城第八小学'},
              {name: '禅城第九小学'},
              {name: '禅城第十一小学'},
              {name: '禅城第十二小学'},
              {name: '禅城第十三小学'},
              {name: '禅城第十四小学'},
            ]},
            {name: '南海区',children: [
              {name: '南海第一小学'},
              {name: '南海第二小学'},
              {name: '南海第三小学'},
              {name: '南海第四小学'},
              {name: '南海第五小学'},
              {name: '南海第六小学'},
              {name: '南海第七小学'},
              {name: '南海第八小学'},
              {name: '南海第九小学'},
              {name: '南海第十一小学'},
              {name: '南海第十二小学'},
              {name: '南海第十三小学'},
              {name: '南海第十四小学'},
            ]},
            {name: '顺德区',children: [
                {name: '顺德第一小学'},
                {name: '顺德第二小学'},
                {name: '顺德第三小学'},
                {name: '顺德第四小学'},
                {name: '顺德第五小学'},
                {name: '顺德第六小学'},
                {name: '顺德第七小学'},
                {name: '顺德第八小学'},
                {name: '顺德第九小学'},
                {name: '顺德第十一小学'},
                {name: '顺德第十二小学'},
                {name: '顺德第十三小学'},
                {name: '顺德第十四小学'},
              ]},
            {name: '三水区',children: [
                {name: '三水第一小学'},
                {name: '三水第二小学'},
                {name: '三水第三小学'},
                {name: '三水第四小学'},
                {name: '三水第五小学'},
                {name: '三水第六小学'},
                {name: '三水第七小学'},
                {name: '三水第八小学'},
                {name: '三水第九小学'},
                {name: '三水第十一小学'},
                {name: '三水第十二小学'},
                {name: '三水第十三小学'},
                {name: '三水第十四小学'},
              ]},
            {name: '高明区',children: [
              {name: '高明第一小学'},
              {name: '高明第二小学'},
              {name: '高明第三小学'},
              {name: '高明第四小学'},
              {name: '高明第五小学'},
              {name: '高明第六小学'},
              {name: '高明第七小学'},
              {name: '高明第八小学'},
              {name: '高明第九小学'},
              {name: '高明第十一小学'},
              {name: '高明第十二小学'},
              {name: '高明第十三小学'},
              {name: '高明第十四小学'},
            ]},*/
        ]
      }
    },
      methods: {
        sidebarChange(e){
          let {index} = e.srcElement.dataset;
          this.activeKey = index;
        },
        onClose(){
          if (!this.$store.state.school.schoolId) {
            this.$Toast('请先选择学校');
          }
          this.$emit('close');
        },
        onSelect(data){
          this.$emit('select',data);
        },

        ready(){
          this.$Loading();
          Promise.all([getSchoolType({shuttle_type: '定制'}),getSchool({shuttle_type: '定制'})]).then(res =>{
            let type = [],school = [],
              obj = {},
              list = [];
            for (let i = 0; i< res.length;i++){
              let ite = res[i];
              if (ite && ite.errcode === 0 ){
                this.$toast.clear();
                if (i === 0) type = ite.row;
                else school = ite.row;
              }
            }

            school.forEach(item => {
              obj[item.school_type_id] = [...obj[item.school_type_id] || [],{name: item.school_name,id:item.school_id}]
            });
            type.forEach(item => {
              list.push({name: item.school_type_name,id: item.school_type_id,children: [...obj[item.school_type_id] || []]})
            });
            console.log(list);
            this.list = list;
          })
        }
      },
      mounted(){
        this.ready();
      }
  }
</script>

<style scoped lang="less">
    /*.container{
        height: 100vh;
    }*/
    .main{
        padding: 10px 0 10px 10px;
        display: flex;
        .sidebar{
            background: #fff;
            .sidebar-item{
                width: 90px;
                color: #333;
                font-size: 15px;
                height: 45px;
                display: flex;
                align-items: center;
                padding-left: 15px;
                position: relative;
                &.active{
                    color: #24C373;
                    &:before{
                        content: '';
                        position: absolute;
                        display: block;
                        width: 3px;
                        height: 19px;
                        background: #24C373;
                        left: 0;
                    }
                }
            }
        }
        .content{
            padding-right: 10px;
            height: 100%;
            flex: 1;
            width: 0;
            margin-left: 2PX;
            overflow: auto;
            background: #ffffff;
            & > li{
                background: #fff;
                height: 50px;
                border-bottom: 1PX solid #dedede;
                color: #333;
                font-size: 17px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 4px;
            }
        }
    }
</style>
